<template>
	<view class="page">
		<view class="margin-lr padding-lr margin-top-sm radius spec-title text-333 flex justify-between align-center bg-white">
			<view class="_left">规格名称:</view>
			<view class="_right text-right text-cut">
				<!-- 的规格 -->
				<input type="text" v-model="info.name" placeholder="请输入规格列表名称" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="margin-lr margin-top-sm text-df text-333">
			<view class="spec-item margin-bottom-sm radius bg-white" v-for="(item,index) in goods_spec" :key="index">
				<view class="spec-item-title padding-lr solid-bottom height-100 flex justify-between align-center">
					<view class="spec-item-left flex align-center">
						<view class="spec-item-left-reduce" @click="clear(1,index)"></view>
						<view class="spec-item-left-name">规格项</view>
					</view>
					<view class="spec-item-right text-right">
						<input type="text" placeholder="请输入规格项   例如: 颜色" placeholder-class="placeholder" v-model="item.name" />
					</view>
				</view>
				<view class="spec-item-content padding-left-xl">
					<view class="spec-item-row padding-right solid-bottom height-100 flex justify-between align-center" v-for="(oItem,oIndex) in item.spec" :key="oIndex">
						<view class="spec-item-left flex align-center">
							<view class="spec-item-left-reduce" @click="clear(2,index,oIndex)"></view>
							<view class="spec-item-left-name">规格值</view>
						</view>
						<view class="spec-item-right text-right">
							<input type="text" placeholder="请输入规格值 例如: 红色" placeholder-class="placeholder" v-model="oItem.item" />
						</view>
					</view>
					<view class="flex padding-right height-100 flex justify-center align-center" >
						<view class="spec-item-left flex align-center justify-center">
							<view class="spec-item-left-name color" @click="addSpec(2,index)">+添加规格值</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="padding-lr margin-top-sm radius bg-white height-100 flex align-center justify-center text-333" @click="addSpec(1,-1)">+添加{{goods_spec.length == 0 ? '单' : '多'}}规格</view>
		</view>
		<view class="footer">
			<view class="btn" @click="addSpecSave">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					name:'',//规格名称
					cid:0,//分类id
					id:0,//规格id
				},
				goods_spec:[]
				
			}
		},
		onLoad(options){
			let {cid,id} = options;
			this.info.cid = cid;
			this.info.id = id;
			if(id){
				this.getSpecInfo(id);
			}
		},
		methods: {
			onBackPress(e) {
				console.log(e);
				if(e.from == 'backbutton'){
					this.$util.showModal({
						title:'提示',
						content:'规格尚未保存,确认退出吗?',
						confirmColor:'#FC6497',
						success:res=>{
							console.log(res);
							if(res.confirm){
								uni.navigateBack({
									delta:1
								})
							}
						},
						fail:err=>{
							console.log(err);
						}
					})
					return true;//阻止默认返回行为
				}
			},
			getSpecInfo(id){
				this.$api.post(global.apiUrls.getSpecInfo,{id:id}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						this.info.name = res.data.data.name;
						this.goods_spec= res.data.data.goods_spec;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			addSpec(type,index){
				if(type == 1){
					this.goods_spec.push({name:'',spec:[{item:''}]});
				}
				if(type == 2){
					let i = index ? index : 0;
					this.goods_spec[i].spec.push({item:''});
				}
			},
			// 删除规格，规格值
			clear(type,index,oIndex){
				let title = '规格项';
				if(type == 2)  title = '规格值';
				this.$util.showModal({
					title:'提示',
					content:'确认删除'+title+'吗？',
					success:res=>{
						console.log(res);
						if(res.confirm){
							if(type == 1){
								this.goods_spec.splice(index,1);
							}
							if(type == 2){
								this.goods_spec[index].spec.splice(oIndex,1);
							}
						}
					},
					fail:err=>{
						console.log(err);
					}
				})
				
			},
			addSpecSave(){
				let {name,id,cid} = this.info;
				let goods_spec = this.goods_spec;
				let flag = true;
				if(!name){
					this.$message.info('请输入规格名称');
					return;
				} 
				if(!name.trim()){
					this.$message.info('请输入规格名称');
					return;
				} 
				let regBiao= /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g
				let _this = this;
				goods_spec.forEach((val,i)=>{
					try{
						if(!val.name.trim()){
							throw '请输入规格项';
						}
						
						console.log(val.name)
							if(regBiao.test(val.name)){
							_this.$message.info('规格项不能输入表情');
							return
						}
						val.spec.forEach((v,oI)=>{
							try{
								if(!v.item.trim()){
									throw '请输入规格值';
								}
								if(regBiao.test(v.item)){
							_this.$message.info('规格值不能输入表情');
							return
						}
							}catch(e){
								flag = false;
								_this.$message.info(e);
							}	
						})
					
					}catch(e){
						flag = false;
						console.log(e)
						_this.$message.info(e);
					}
				})
				let data = {
					name:name,
					cid:cid,
					id:id,
					goods_spec:JSON.stringify(goods_spec)
				}
				
				if(id!==0){
					data.judge = 1
				}
				
				if(flag){
					console.log(data);
					this.$api.post(global.apiUrls.addSpec,data).then(res=>{
						console.log(res);
						if(res.data.code == 1){
							this.$message.info('保存成功');
							uni.setStorageSync('addSpec',res.data.data);
							setTimeout(()=>{
								// uni.$emit('addSpec',res.data.data)
								uni.navigateBack({
									delta: 1
								});
							},800)
							
						}
					}).catch(err=>{
						console.log(err);
					})
				}
				
			}	
		}
	}
</script>

<style lang="scss" scoped>
.page{
	padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
  	padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
}
.color{
	color: #1A76F2;
}
.placeholder{
	font-size: 28rpx;
	color:#bfbfbf;
}
.spec-title{
	height: 100rpx;
	._left{
		width:150rpx;
		position: relative;
		&::before{
			content: "*";
			color: red;
			position: absolute;
			top: 50%;
			left: -18rpx;
			transform: translateY(-50%);
		}
	}
	._right{
		width:calc(100% - 150rpx);
	}
}
.height-100{
	height: 100rpx;
}
.spec-item-left{
	width: 300rpx;
	.spec-item-left-reduce{
		width:36rpx;
		height:36rpx;
		border-radius:50%;
		background: #FC9C3A;
		margin-right:16rpx;
		position:relative;
		&::after{
			content:'';
			position: absolute;
			top: 50%;
			left:50%;
			transform: translate(-50%,-50%);
			width:20rpx;
			height:2rpx;
			background: #FFFFFF;
		}
	}
}
.spec-item-right{
	width: calc(100% - 300rpx);
}
.footer{
	position:fixed;
	bottom: 0;
	padding: 30rpx;
	padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
  	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	width:100%;
	background: white;
	.btn{
		width: 100%;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		color: white;
		background: $bgtheme;
		border-radius:45rpx;
	}
}
</style>
